<template>
  <div class="order-card card">
    <!-- 订单头部 -->
    <div class="p-4 border-b flex items-center justify-between bg-gray-50">
      <div class="flex items-center space-x-4">
        <span class="text-sm text-gray-600">订单号：{{ order.orderNo }}</span>
        <OrderStatus :status="order.status" />
      </div>
      <span class="text-sm text-gray-500">
        {{ formatDate(order.createdAt) }}
      </span>
    </div>
    
    <!-- 商品列表 -->
    <div class="p-4">
      <div
        v-for="item in order.items"
        :key="item.id"
        class="flex items-center space-x-4 pb-4 mb-4 border-b last:border-b-0 last:pb-0 last:mb-0"
      >
        <NuxtLink :to="`/products/${item.productId}`" class="flex-shrink-0">
          <NuxtImg
            :src="item.productCover"
            :alt="item.productTitle"
            class="w-20 h-20 object-cover rounded"
          />
        </NuxtLink>
        
        <div class="flex-1 min-w-0">
          <NuxtLink
            :to="`/products/${item.productId}`"
            class="font-medium hover:text-primary-600 line-clamp-1"
          >
            {{ item.productTitle }}
          </NuxtLink>
          <div class="text-sm text-gray-500 mt-1">
            数量：{{ item.quantity }}
          </div>
        </div>
        
        <div class="text-right">
          <div class="font-bold">¥{{ item.price.toFixed(2) }}</div>
        </div>
      </div>
    </div>
    
    <!-- 订单底部 -->
    <div class="p-4 border-t bg-gray-50 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <!-- 待支付：显示支付和取消按钮 -->
        <template v-if="order.status === 'pending'">
          <button
            class="btn-primary"
            @click="$emit('pay', order.id)"
          >
            立即支付
          </button>
          <button
            class="btn-outline"
            @click="$emit('cancel', order.id)"
          >
            取消订单
          </button>
        </template>
        
        <!-- 已支付：显示查看详情按钮 -->
        <NuxtLink
          v-else
          :to="`/user/orders/${order.id}`"
          class="btn-outline"
        >
          查看详情
        </NuxtLink>
      </div>
      
      <div class="text-right">
        <div class="text-sm text-gray-600">订单总额</div>
        <div class="text-xl font-bold text-primary-600">
          ¥{{ order.totalAmount.toFixed(2) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Order } from '~/types'
import dayjs from 'dayjs'

interface Props {
  order: Order
}

defineProps<Props>()
defineEmits(['cancel', 'pay'])

function formatDate(date: string) {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped>
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

